<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="客户名称" prop="contacter">
        <el-input
          v-model="queryParams.contacter"
          placeholder="请输入客户名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单id" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          placeholder="请输入订单id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="支付方式" prop="payType">
        <el-select v-model="queryParams.payType" placeholder="请选择支付方式" clearable>
          <el-option
            v-for="dict in dict.type.bm_inorderlist_payType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单步骤" prop="orderStep">
        <el-select v-model="queryParams.orderStep" placeholder="请选择订单步骤" clearable>
          <el-option
            v-for="dict in dict.type.bm_inorderlist_orderstep"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单流程" prop="orderStep">
        <el-select v-model="queryParams.orderStep" placeholder="请选择订单流程" clearable>
          <el-option
            v-for="dict in dict.type.bm_inorderlist_orderstep"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="支付类型" prop="payType">
        <el-select v-model="queryParams.payType" placeholder="请选择支付类型" clearable>
          <el-option
            v-for="dict in dict.type.bm_inorderlist_payType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="请选择仓库编号" prop="warehouseCode">-->
      <!--        <el-select v-model="queryParams.warehouseCode" placeholder="请选择仓库编号" clearable>-->
      <!--          <el-option-->
      <!--            v-for="dict in dict.type.bm_member_state"-->
      <!--            :key="dict.value"-->
      <!--            :label="dict.label"-->
      <!--            :value="dict.value"-->
      <!--          />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item label="订单创建时间" prop="createTimeBefore">
        <el-date-picker clearable
                        v-model="queryParams.createTimeBefore"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择订单创建时间">
        </el-date-picker>
        <el-date-picker clearable
                        v-model="queryParams.createTimeAfter"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择订单创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="inorderlistList">
      <el-table-column label="采购单号" align="center" prop="orderId"/>
      <el-table-column label="仓库代码" align="center" prop="warehouseCode"/>
      <el-table-column label="客户信息" align="center" prop="contacter"/>
      <el-table-column label="送货地址" align="center" prop="address"/>
      <el-table-column label="采购数量" align="center" prop="buyNum"/>
      <el-table-column label="金额" align="center" prop="price"/>
      <el-table-column label="步骤" align="center" prop="orderStep">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bm_inorderlist_orderstep" :value="scope.row.orderStep"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="getTable(scope.row)"
          >详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="流程图"
      :visible.sync="dialogVisible"
    >
      <div>
        <el-steps :active="active" finish-status="success">
          <el-step title="未支付">未支付</el-step>
          <el-step title="待配货">待配货</el-step>
          <el-step title="配货中">配货中</el-step>
          <el-step title="已配货">已配货</el-step>
          <el-step title="待装货">待装货</el-step>
          <el-step title="装货中">装货中</el-step>
          <el-step title="已装货">已装货</el-step>
          <el-step title="待验收">待验收</el-step>
          <el-step title="验收中">验收中</el-step>
          <el-step title="已验收">已验收</el-step>
          <el-step title="待交货">待交货</el-step>
          <el-step title="交货中">交货中</el-step>
          <el-step title="已交货">已交货</el-step>
        </el-steps>
        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
      </div>
      <a-card>
        <div>
          <a-button @click="receipt(billNo)" type="primary">打印</a-button>
          <div
            class="tables"
          >
            <div style="width: 1000px" id="pdfDom">
              <p align="center" class="title">中百物业收款收据</p>
              <div style="width: 100%;margin-bottom: 10px;">
                <div style="width: 35%;float: left;font-weight:bold">房间:{{ Receipt.roomNo }} </div>
                <div style="width: 35%;float: left;font-weight:bold">建筑面积（平方米）: {{ Receipt.buildArea }}</div>
                <div style="width: 30%;float: right;font-weight:bold">收据编号:{{ billNo }} </div>
              </div>
              <div style="width: 100%;margin-bottom: 10px;">
                <div style="width: 35%;float: left;font-weight:bold">业主 : {{ Receipt.ownerName }}</div>
                <div style="width: 35%;float: left;font-weight:bold">收款类型: {{ Receipt.payType }}</div>
                <div style="width: 30%;float: right;font-weight:bold">收款日期:{{ (Receipt.payTime || '').split(' ')[0] }}</div>
              </div>
              <table class="table" id="printpdf">
                <tr >
                  <td colspan="2" width="220">费用项目</td>
                  <td colspan="2" width="220">起始日期</td>
                  <td colspan="2" width="220">截止日期</td>
                  <td colspan="2" width="200">单价</td>
                  <td colspan="2" width="170">费用金额</td>
                  <td colspan="2" width="170">上月数</td>
                  <td colspan="2" width="170">本月数</td>
                  <td colspan="2" width="390">实用量</td>
                  <td colspan="2" width="220">本次实收</td>
                </tr>
                <tr v-for="(item,index) in receiptData" :key="index">
                  <td colspan="2" width="200">{{ item.itemText }}</td>
                  <td colspan="2" width="170">{{ (item.startTime || '').split(' ')[0] }}</td>
                  <td colspan="2" width="170">{{ (item.endTime || '').split(' ')[0] }}</td>
                  <td colspan="2" width="170">{{ item.price }}</td>
                  <td colspan="2" width="170">{{ item.amount }}</td>
                  <td colspan="2" width="170">{{ item.startRecord }}</td>
                  <td colspan="2" width="170">{{ item.endRecord }}</td>
                  <td colspan="2" width="170">{{item.record}}</td>
                  <!--              <td colspan="2" width="170">{{ item.discountAmount }}</td>-->
                  <td colspan="2" width="170">{{ item.actualAmount }}</td>
                </tr>
                <tr>
                  <td colspan="2" width="300">合计(人民币大写)</td>
                  <td colspan="6" width="220"></td>
                  <td colspan="2" width="220">{{ Receipt.totalAmount }}</td>
                  <td colspan="4" width="220"></td>
                  <td colspan="2" width="220">优惠：{{Receipt.totalDiscountAmount }}</td>
                  <td colspan="2" width="200">{{ Receipt.totalActualAmount }}</td>
                </tr>
              </table>
              <div style="width: 100%;margin-bottom: 10px;">
                <div style="width: 30%;float: left;font-weight:bold">结算人:{{Receipt.employeeName}}</div>
                <div style="width: 35%;float: left;font-weight:bold">服务电话:</div>
              </div>
            </div>
          </div>
        </div>
      </a-card>
      <el-descriptions title="采购单信息">
        <el-descriptions-item label="采购单号">{{ info.orderId }}</el-descriptions-item>
        <el-descriptions-item label="仓库代码">{{ info.warehouseCode }}</el-descriptions-item>
        <el-descriptions-item label="客户信息">{{ info.contacter }} {{ info.tel }} {{ info.BusinessName }}
        </el-descriptions-item>
        <el-descriptions-item label="送货地址">{{ info.address }}</el-descriptions-item>
        <el-descriptions-item label="业务人员">{{ info.orderId }}</el-descriptions-item>
        <el-descriptions-item label="仓管人员">{{ info.ename }}</el-descriptions-item>
        <el-descriptions-item label="物流人员">{{ info.orderId }}</el-descriptions-item>
        <el-descriptions-item label="付款方式">
          <el-tag size="small">{{ info.payType }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建方式">{{ info.createTime }}</el-descriptions-item>
        <el-descriptions-item label="支付定金">{{ info.createTime }}</el-descriptions-item>
      </el-descriptions>
      <el-table v-loading="loading" :data="inordergoodslistTable">
        <el-table-column label="采购单号" align="center" prop="orderId"/>
        <el-table-column label="商品名称" align="center" prop="goodsName"/>
        <el-table-column label="商品规格" align="center" prop="sname"/>
        <el-table-column label="单价" align="center" prop="price"/>
        <el-table-column label="审核状态" align="center" prop="orderStep">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.bm_inorderlist_orderstep" :value="scope.row.orderStep"/>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {listInorderlist} from "@/api/manage/inorderlist";
import {
  selectBmInordergoodslistList,
  selectBmInordergoodslistTable,
  updateOrderStep
} from "../../../api/manage/inorderlist";

export default {
  name: "Inorderlist",
  dicts: ['bm_inorderlist_orderstep', 'bm_inorderlist_payType', 'bm_member_state'],
  data() {
    return {
      info: {
        orderId: "暂无",
        warehouseCode: "暂无",
        contacter: "暂无",
        BusinessName: "暂无",
        address: "暂无",
        tel: "暂无",
        ename: "暂无",
        createTime: "暂无",
      },
      //步骤条
      active: 0,
      //详情弹窗
      dialogVisible: false,
      // 遮罩层
      loading: true,
      // 选中数组
      query: {
        orderId: null
      },
      Step: {
        orderStep: null,
        orderId: null
      },
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单配送流程表格数据
      inorderlistList: [],

      inordergoodslistTable: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId: null,
        contacter: null,
        orderStep: null,
        amount: null,
        payType: null,
        orderstep: null,
        createTimeAfter: null,
        createTimeBefore: null,
        paytime: null,
        orderstate: null,
        ordersteprecord: null,
        warehouseCode: null,
        logisticsid: null,
        mark: null
      },
      loading: false,
      tableData: [],
      Receipt: {
        ownerName: '',
        buildArea: '',
        payType: '',
        payUserId: '',
        payTime: '',
        payUsername: '',
        payStatus: '',
        refundAmount: '',
        refundTime: '',
        tenantId: '',
        deptId: '',
        remarks: '',
        phone: '',
        startTime: '',
        endTime: '',
        price: '',
        startRecord: '',
        endRecord: '',
        area: '',
        amount: '',
        DiscountAmount: '',
        actualAmount: '',
        billNo: '',
        employeeName: '',
        roomNo: ''
      },
      receiptData: [],
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0
      },
      pages: {
        size: 10,
        current: 1
      },
      billNo: 0,
      // 表单参数
      form: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询订单配送流程列表 */
    getList() {
      console.log("开始查询");
      console.log(this.queryParams);
      this.loading = true;
      listInorderlist(this.queryParams).then(response => {
        this.inorderlistList = response.rows;
        console.log(response.rows);
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getTable(row) {
      console.log(row);
      this.query.orderId = row.orderId;
      console.log(this.query);
      selectBmInordergoodslistTable(this.query).then(response => {
        this.inordergoodslistTable = response.rows;
        this.Step.orderStep = response.rows[0].orderStep;
        this.Step.orderId = response.rows[0].orderId;
        this.active = this.Step.orderStep;
        console.log(this.Step.orderStep);
        console.log(this.inordergoodslistTable);
        this.dialogVisible = true;
      });
      selectBmInordergoodslistList(this.query).then(response => {
        this.info = response.rows;
      });
    }
  },
    next() {
      console.log("当前步骤" + this.active);
      if (this.active++ > 13) this.$modal.msgSuccess("订单完成");
      this.Step.orderStep++;
      updateOrderStep(this.Step).then(response => {
        this.$modal.msgSuccess("修改成功");
      });
      console.log("步骤" + this.active);
      selectBmInordergoodslistTable(this.query).then(response => {
        this.inordergoodslistTable = response.rows;
      })
      // this.getList();
    },

  init () {
    this.loading = true
    this.billNo = this.$route.query.billNo
    console.log('billNo', this.billNo)
    getReceipt(this.billNo).then(res => {
      this.receiptData = res.data
      this.receiptData.forEach(da => {
        da.price = da.price / 100.0
        da.amount = da.amount / 100.0
        da.buildArea = da.buildArea / 100.0
        da.endRecord = da.endRecord / 100.0
        da.startRecord = da.startRecord / 100.0
        da.discountAmount = da.discountAmount / 100.0
        da.actualAmount = da.actualAmount / 100.0
        da.record = da.endRecord - da.startRecord
      })
      this.Receipt = res.data[0]
      this.Receipt.totalAmount = this.Receipt.totalAmount / 100.0
      this.Receipt.totalActualAmount = this.Receipt.totalActualAmount / 100.0
    })
    console.log('data', this.num)
  },
  receipt (id) {
    this.loading = true
    receiptPdf(id).then(res => {
      console.log(res)
      const blob = new Blob([res], { type: 'application/pdf' })
      const url = URL.createObjectURL(blob)
      printJS({
        printable: url,
        type: 'pdf'
      })
    }).catch(err => {
      this.$message.error(err.msg)
    })
  }

};
</script>
<style scoped>
.table p {
  text-align: center;
  margin: 10px 0;
  color: #000c17;
  font-size: 18px;
}
.table{
  border-style: solid;
  border-width: 1.0pt;
  font-variant: normal;
}
td{
  border-style: solid;
  border-width: 1.0pt;
}
.centent > p{
  float: left;
  font-size: 18px;
  font-variant: normal;
  color: #000c17;
}
.tables{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#pdfDom{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title{
  font-size: 30px;
  font-variant: normal;
}
</style>
